/**
 * Created by wuhaiyang on 2017/4/12.
 */


import React, {Component, PropTypes} from 'react'
import {
    StatusBar,
    StyleSheet,
    View,
    Text,
    Platform
} from 'react-native'


const checkStatusBarProps = {
    backgroundColor: PropTypes.string,
    barStyle: PropTypes.oneOf(['default', 'light-content','dark-content']),
    hidden: PropTypes.bool
}
const STATUS_BAR_HEIGHT = 20

const NAVIBAR_IOS_HEIGHT = 44
const NAVIBAR_ANDROID_HEIGHT = 50

export default class NavigationToolbar extends Component {

    static propTypes = {
        statusBar: PropTypes.shape(checkStatusBarProps),
        leftView: PropTypes.element,
        title: PropTypes.string,
        titleView: PropTypes.element,
        rightView: PropTypes.element,
        style: View.propTypes.style
    }
    static defaultProps = {
        statusBar: {
            hidden: false,
            barStyle: 'light-content'
        }
    }

    constructor(props) {
        super(props)
    }

    render() {
        let StatusBarComponent = <View style={styles.statusBar}>
            <StatusBar {...this.props.statusBar}/>
        </View >
        let LeftView = this.props.leftView
        let TitleComponent = this.props.titleView ? this.props.titleView :
            <Text style={styles.title}>{this.props.title}</Text>
        let RightView = this.props.rightView
        let Content = <View style={styles.navigationToolbarContainer}>
            {LeftView}
            <View style={styles.titleContainer}>
                {TitleComponent}
            </View>
            {RightView}
        </View>
        return (
            <View style={this.props.style}>
                {StatusBarComponent}
                {Content}
            </View>
        )
    }
}
const styles = StyleSheet.create({
    statusBar: {
        height: Platform.OS === 'ios' ? STATUS_BAR_HEIGHT : 0
    },
    title: {
        fontSize: 18,
        color: 'white'
    },
    navigationToolbarContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        height: Platform.OS === 'ios' ? NAVIBAR_IOS_HEIGHT : NAVIBAR_ANDROID_HEIGHT
    },
    titleContainer: {
        alignItems: 'center',
        justifyContent: 'center',
        left: 60,
        right: 60,
        bottom: 0,
        top: 0,
        backgroundColor:'gray',
        position:'absolute'
    }
})